<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="detailRegister"
    @close="drawerReset"
    :closable="false"
    :showOkBtn="false"
    cancelText="关闭"
    :title="drawerInfo.record.name"
    showFooter
    isDetail
  >
    <div class="box-drawer">
      <div class="drawer-header">
        <div class="header-detail">
          <div class="detail-item">
            <div class="item-name">镜像名称</div>
            <div class="item-value">{{ drawerInfo.record.name }}</div>
          </div>
          <div class="detail-item">
            <div class="item-name">所属组织</div>
            <div class="item-value">{{ drawerInfo.record.namespace }}</div>
          </div>
        </div>
        <div class="header-detail">
          <div class="detail-item">
            <div class="item-name">版本数</div>
            <div class="item-value">{{ drawerInfo.record.numImages }}</div>
          </div>
          <div class="detail-item">
            <div class="item-name">下载次数</div>
            <div class="item-value">{{ drawerInfo.record.numDownload }}</div>
          </div>
        </div>
        <div class="header-detail">
          <div class="detail-item">
            <div class="item-name">已用空间</div>
            <div class="item-value">{{ formatBytes(drawerInfo.record.size) }}</div>
          </div>
          <div class="detail-item">
            <div class="item-name">创建时间</div>
            <div class="item-value">{{ drawerInfo.record.createdAt }}</div>
          </div>
        </div>
      </div>
      <div class="search-input">
        <a-input-search
          v-model:value.trim="drawerInfo.search"
          placeholder="请输入镜像版本"
          style="width: 260px"
          allowClear
          enter-button
          @search="onSearch"
        />
        <a-button type="primary" style="margin-left: 4px" @click="reload">
          <template #icon>
            <reload-outlined />
          </template>
        </a-button>
      </div>
      <BasicTable @register="registerTable"></BasicTable>
    </div>
  </BasicDrawer>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, createVNode } from 'vue'
import { BasicDrawer, useDrawerInner } from '@/components/Drawer'
import { BasicTable, useTable } from '@/components/Table'
import { getDetailBasicColumns } from '../dataSource'
import { cloneDeep } from 'lodash-es'
import { formatBytes } from '@/utils'
import { ReloadOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { MirroringRecordDetail, MirroringRecord } from '@/types/deployUpgrade'
import api from '@/api'

const { listRepositoryTags } = api

const emit = defineEmits(['register'])

const drawerInfo = reactive<{
  record: Partial<MirroringRecord>
  dataList: MirroringRecordDetail[]
  search: string
}>({
  record: {},
  dataList: [],
  search: ''
})

const drawerReset = () => {
  drawerInfo.record = {}
  drawerInfo.search = ''
  setTableData([])
}

const [registerTable, { reload, setTableData, setProps }] = useTable({
  api: listRepositoryTags,
  columns: getDetailBasicColumns(),
  afterFetch: afterDataFetch,
  immediate: false, //初始化不请求数据
  pagination: false,
  fetchSetting: {
    listField: 'list'
  }
})

// 表格返回数据处理
function afterDataFetch(data: MirroringRecordDetail[]) {
  drawerInfo.dataList = data
  return data
}
const onSearch = () => {
  if (drawerInfo.search) {
    let dataList = drawerInfo.dataList.filter(
      (item: MirroringRecordDetail) => item.tag && item.tag.indexOf(drawerInfo.search) > -1
    )
    setTableData(dataList)
  } else {
    setTableData(cloneDeep(drawerInfo.dataList))
  }
}
const [detailRegister, { closeDrawer }] = useDrawerInner(async (data) => {
  drawerInfo.record = cloneDeep(data.record)
  setProps({
    searchInfo: {
      limit: '99',
      namespace: drawerInfo.record.namespace,
      repository: drawerInfo.record.name
    }
  })
  reload()
})
</script>

<style lang="less" scoped>
.box-drawer {
  position: relative;
  padding: 30px 24px;
  .drawer-header {
    .header-detail {
      display: flex;
      font-size: 12px;
      margin-bottom: 30px;
      .detail-item {
        display: flex;
        .item-name {
          width: 120px;
          color: #979ca7;
        }
        .item-value {
          width: 400px;
        }
      }
    }
  }
  .search-input {
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
